<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>white</view>
				<view>主题色，只能选white或black，默认white</view>
			</view>
			<view class="tr">
				<view>sizeNum</view>
				<view>Number</view>
				<view>5</view>
				<view>中央图标大小，固定单位em</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>89</view>
				<view>手动指定层级数</view>
			</view>
			<view class="tr">
				<view>loadingMode</view>
				<view>String</view>
				<view>rotateRing-3</view>
				<view>外圈动画名，定义在vi-loading.css</view>
			</view>
			<view class="tr">
				<view>useMask</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用透明遮罩，点击遮罩不会关闭，用于期间屏蔽屏幕点击</view>
			</view>
			<view class="tr">
				<view>loading</view>
				<view>Boolean</view>
				<view>false</view>
				<view>启动、关闭状态开关</view>
			</view>
			<view class="tr">
				<view>transition</view>
				<view>Number</view>
				<view>0.3</view>
				<view>动画出现及消失的过渡时间</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-loading :loading="开关变量">log内容&lt;/vi-loading>`}}
			</view>
			<view class="py-sm">
				<vi-loading :loading="state.demo1"></vi-loading>
				<vi-button @click="$set(state, 'demo1', !state.demo1)">默认</vi-button>
			</view>
			<view class="py-sm">
				<vi-loading loadingMode="rotateReverseBlock-2" :loading="state.demo2"></vi-loading>
				<vi-button @click="$set(state, 'demo2', !state.demo2)">其他动画</vi-button>
			</view>
			<view class="py-sm">
				<vi-loading loadingMode="jumpCircular-4" :loading="state.demo3" useMask></vi-loading>
				<vi-button @click="$set(state, 'demo3', !state.demo3)">遮罩</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:{}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
